<template>
  <div :id="name" class="chart-container"></div>
</template>
<script>
import { Pie } from '@antv/g2plot'
export default {
  data () {
    return {
      piePlot: null,
    }
  },
  props: {
    name: {
      type: String,
      default: 'pieCanvas'
    },
    data: {
      type: Array,
      default: () => []
    },
    pieRadius: {
      type: Number,
      default: 0.55
    },
  },
  mounted() {
    this.piePlot = new Pie(this.name, {
      appendPadding: 10,
      data: this.data,
      angleField: 'value',
      colorField: 'type',
      radius: this.pieRadius,
      color: ['#019cf6', '#fb7293', '#52C41A', '#FFA940'],
      label: {
        type: 'spider',
        labelHeight: 28,
        content: '{name}\n{percentage}',
        style: {
          fill: '#fff',
          opacity: 0.8,
        }
      },
      interactions: [{ type: 'element-active' }],
      state: {
        // 设置 active 激活状态的样式
        active: {
          animate: { duration: 100, easing: 'easeLinear' },
          style: {
            lineWidth: 0,
            fillOpacity: 0.9
          },
        },
      },
      pieStyle: {
        lineWidth: 0,
      },
      legend: {
        position: 'bottom',
      },
      tooltip: {
        formatter: (datum) => {
          return { name: datum.type, value: this.thousands(datum.value) + '元'};
        }
      },
    })
    this.piePlot.render()
  },
  methods: {
    thousands: function (num) {
      var str = num.toString();
      var reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
      return str.replace(reg,"$1,");
    }
  }
}
</script>
<style lang="scss" scoped>
.chart-container {
  width: 100%;
  height: 100%;
}
</style>
